<template>
	<view class="case">
		<view class="topbg">
			<view class="top1">
				<view class="leftCont">
					<view class="left">
						<view class="">
							数据有效期截止时间:2025-06-13 08:29:06
						</view>
						<view class="">
							免表声明:大数据排查，不能作为最终判定
						</view>
						<view class="">
							已阅读并同意《授权同意书》及《他人授权承诺书》查询失败系统会自动全额退款
						</view>

					</view>
					<view class="bot">
						<view class="dif">
							本产品提供数据查询服务，该交易不可撤销
						</view>
						<view class="">
							精准查 专业提供司法数据文书查询服务
						</view>
					</view>
				</view>
				<view class="btn">
					立即获取
				</view>
			</view>

			<!-- 身份证验证 -->
			<view class="idcard">
				<view class="tit">
					<image src="/static/aidex/img/verify.png" mode=""></image>
					身份证验证
				</view>

				<view class="list">
					<view class="item">
						<view class="label">
							姓名
						</view>
						<view class="name">
							王哥
						</view>
					</view>
					<view class="item">
						<view class="label">
							性别
						</view>
						<view class="name">
							男
						</view>
					</view>
					<view class="item">
						<view class="label">
							年龄
						</view>
						<view class="name">
							36
						</view>
					</view>
					<view class="item">
						<view class="label">
							身份证号
						</view>
						<view class="name">
							321323********1212
						</view>
					</view>
					<view class="item">
						<view class="label">
							归属地
						</view>
						<view class="name">
							江苏
						</view>
					</view>
				</view>
			</view>


		</view>
		<view class="zongshu">
			<view class="title">
				<view class="left">
					<view class="line">
					</view>
					信息综述
				</view>
				<view class="right">
					本产品提供数据查询服务，该交易不可撤销
				</view>
			</view>
			<view class="cacu">
				<view class="item">
					<view class="name">
						失信被执行人
					</view>
					<view class="num">
						1条
					</view>
				</view>
				<view class="item">
					<view class="name">
						执行公告
					</view>
					<view class="num">
						2条
					</view>
				</view>
				<view class="item">
					<view class="name">
						裁判文书
					</view>
					<view class="num">
						2条
					</view>
				</view>
				<view class="item">
					<view class="name">
						开庭公告
					</view>
					<view class="num">
						1条
					</view>
				</view>
				<view class="item">
					<view class="name">
						法院公告
					</view>
					<view class="num">
						1条
					</view>
				</view>
				<view class="item">
					<view class="name">
						案件流程
					</view>
					<view class="num">
						1条
					</view>
				</view>
				<view class="item">
					<view class="name">
						曝光台
					</view>
					<view class="num">
						1条
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.topbg {
		width: 100%;
		background: linear-gradient(180deg, #507cf5 0%, #90acf7 30%, #ecf1fc 70%, #eff5ff 100%);

		.top1 {
			display: flex;
			padding: 30rpx;

			.leftCont {
				flex: 1;
			}

			.left {

				font-family: PingFang SC, PingFang SC;
				font-size: 22rpx;
				color: #fff;
				margin-right: 60rpx;

				view {
					margin-bottom: 10rpx;
					line-height: 35rpx;
				}

			}

			.bot {
				font-family: PingFang SC, PingFang SC;
				font-size: 28rpx;
				color: #fff;

				.dif {
					background: #d9e2fc;
					color: #d07b8c;
					padding: 4rpx 0 4rpx 20rpx;
					font-size: 24rpx;
					margin-bottom: 15rpx;
				}
			}

			.btn {
				margin-top: 30rpx;
				background: #fff;
				border-radius: 10rpx;
				width: 160rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #4a77f5;
			}
		}

		.idcard {
			margin: 0 auto;
			width: 714rpx;
			height: 442rpx;
			background: url("/static/aidex/img/verify_bg.png") no-repeat;
			background-size: cover;

			.tit {
				display: flex;
				align-items: center;
				// font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #4a77f5;
				padding: 18rpx 0 0 40rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-top: 2rpx;
				}
			}

			.list {
				padding: 35rpx 40rpx 0;

				.item {
					color: #777;
					margin-bottom: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
		}

		.right {
			font-size: 22rpx;
			color: #cccccc;
		}

		.line {
			margin-right: 8rpx;
			width: 4rpx;
			height: 30rpx;
			background: #4a77f5;
			border-radius: 5rpx;
		}

		font-family: PingFang SC,
		PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #4a77f5;
	}

	.zongshu {
		padding: 20rpx 30rpx;
		margin: 30rpx 0 0;
		background: #fff;
		.cacu{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item{
				height: 100rpx;
				background: #e3eafb;
				border-radius: 10rpx;
				width: 31%;
				margin: 0 3.5%  20rpx 0;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				&:nth-child(3),&:nth-child(6){
					margin-right: 0 !important;
				}
				.name{
					
					color: #333333;
				}
				.num{
					color: #f6622a;
				}
			}
		}
	}
</style>